<template>
  <section>
    <el-form label-width="100px">
      <el-form-item v-for="(d,i) in item.data.vals" :key="i" :label="d.title">
        <el-input v-model="d.val" size="mini"></el-input>
      </el-form-item>
      <el-form-item>
        <div>
          <el-button size="mini" type="primary" @click="savePage(item)"  v-if="item.state === 0">测试·保存</el-button>
          <el-button type="danger" size="mini" @click="delPage">删除</el-button>
          <el-button type="success" size="mini" @click="finishePage" style="float: right;margin-right: 0px"  v-if="item.state === 0">完成</el-button>
        </div>
        <div v-if="item.state === 1">
          <span style="color: red;font-weight: bold">
          报告项已创建完毕
          </span>
        </div>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import DateFormat from '@/common/date-formater'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler.js'
  export default {
    name: "No1",
    props: ['item','report'],
    data() {
      return {
        currUser:null
      }
    },
    created(){
      console.log(this.report)
      //获取一下用户信息
      if(this.item.data.vals){
        console.log('有val')
      }else {
        Vue.set(this.item.data,'vals',this.item.reportModule.metadata.detail)
        console.log('没val')
        this.getUser(this.report.userId)
      }
    },
    mounted(){
    },
    computed:{
    },
    watch: {
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      timeFormatter(date){
        return DateFormat.format(date)
      },
      gender(i){
        if(i===1) return '男'
        if(i===2) return '女'
      },
      getUser(uid){
        this.fetch({name:"getUser",data:{uid}})
          .then(res=>{
            console.log(res)
            this.currUser=res
            this.fillIn()
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      fillIn(){
        console.log(this.item.data.vals)
        this.item.data.vals.forEach(v=>{
          for(let key in this.report){
            if(key === v.code){
              if(v.code === 'sn'){
                Vue.set(v,'val',this.report[key])
              }else {
                Vue.set(v,'val',this.timeFormatter(this.report[key]))
              }
            }
          }
          for(let k in this.currUser){
            if(k === v.code){
              Vue.set(v,'val',this.currUser[k])
            }
            if(k === 'sex' && v.code === 'gender'){
              console.log(this.currUser[k])
              Vue.set(v,'val',this.gender(this.currUser[k]))
            }
          }
        })
        this.savePage()
      },
      savePage(){
        console.log(this.item.data.vals)
        this.$emit('save')
      },
      delPage(){
        this.$emit('del')
      },
      finishePage(){
        this.$emit('finish')
      }
    }
  }
</script>

<style scoped>

</style>
